<template >
  <div class="app-container"
    v-loading="loading"
    element-loading-text="加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.6)">
    <div class="title">
      <div class="left"><span class="circle"></span>档案信息</div>
      <div class="right" v-show="!isDisabled">
        <el-button size="small" @click="handelSaveFn('1')">提交</el-button>
        <!-- <el-button type="primary" size="small" @click="handelSaveFn('0')">保存</el-button> -->
      </div>
    </div>
    <div class="context-warp" style="">
      <div class="page-form-item">
        <label class="page-form-item-label">
          <span class="page-form-item-label__text"><span style="color:red">*</span>片区</span>
        </label>
        <div class="page-form-item-content" style="position: relative;z-index: 1;height: auto;line-height: 36px;overflow: unset;line-height:24px">
          <treeselect v-model="topData.deptId" :options="deptOptions" :disabled="isDisabled" :show-count="true" placeholder="请选择归属部门" style="line-height:24px" />
          <!-- <el-cascader
          size="small"
          :show-all-levels="false"
          v-model="topData.deptId"
          :disabled="isDisabled"
          :options="deptOptions"
          :props="{ checkStrictly: true ,value:'id',emitPath:false}"
          clearable></el-cascader> -->
        </div>
      </div>
      <div class="page-form-item">
        <label class="page-form-item-label">
          <span class="page-form-item-label__text"><span style="color:red">*</span>猪场名称</span>
        </label>
        <div class="page-form-item-content">
          <el-input v-model="topData.pigfarmName" @change="handelpigfarmName" :disabled="isDisabled" size="small" maxlength="30" placeholder="请输入猪场名称"></el-input>
        </div>
      </div>
      <div class="page-form-item">
        <label class="page-form-item-label">
          <span class="page-form-item-label__text"><span style="color:red">*</span>猪场编码</span>
        </label>
        <div class="page-form-item-content">
          <el-input v-model="topData.pigfarmNumber" :disabled="isDisabled" size="small" maxlength="35" placeholder="请输入猪场编码"></el-input>
        </div>
      </div>

      <div class="page-form-item">
        <label class="page-form-item-label">
          <span class="page-form-item-label__text"><span style="color:red">*</span>建设类型</span>
        </label>
        <div class="page-form-item-content">
          <el-select v-model="topData.buildType" :disabled="isDisabled" clearable placeholder="请选择" size="small">
            <el-option label="楼房猪场" value="1"></el-option>
            <el-option label="平房猪场" value="2"></el-option>
          </el-select>
        </div>
      </div>
      <div class="page-form-item">
        <label class="page-form-item-label">
          <span class="page-form-item-label__text"><span style="color:red">*</span>猪场类型</span>
        </label>
        <div class="page-form-item-content">
          <!-- 1：繁殖场 2：育肥场、3：租赁代养场、4：种猪场、5：自养小区、6：租赁繁殖场、7：公猪站 -->
          <el-select v-model="topData.pigfarmType" :disabled="isDisabled" clearable placeholder="请选择" size="small">
            <el-option label="繁殖场" value="1"></el-option>
            <el-option label="育肥场" value="2"></el-option>
            <el-option label="租赁代养场" value="3"></el-option>
            <el-option label="种猪场" value="4"></el-option>
            <el-option label="自养小区" value="5"></el-option>
            <el-option label="租赁繁殖场" value="6"></el-option>
            <el-option label="公猪站" value="7"></el-option>
          </el-select>
        </div>
      </div>
      <div class="page-form-item">
        <label class="page-form-item-label">
          <span class="page-form-item-label__text"><span style="color:red">*</span>规模(头)</span>
        </label>
        <div class="page-form-item-content">
          <el-input type="number" v-model="topData.scale"
          :disabled="isDisabled" size="small" maxlength="100"
          oninput="if(value>999999999)value=999999999;value = Number(value.toString().match(/^\d+(?:\.\d{0,0})?/));"
          onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"
          placeholder="请输入规模"></el-input>
        </div>
      </div>

      <div class="page-form-item">
        <label class="page-form-item-label">
          <span class="page-form-item-label__text"><span style="color:red">*</span>所在公司</span>
        </label>
        <div class="page-form-item-content">
          <loadingSearchFormCompany
            v-bind:companyName="topData.companyName"
            v-on:changeCom="changeCom($event)"
            :isDisabled="isDisabled"
          />

        </div>
      </div>
      <div class="page-form-item">
        <label class="page-form-item-label">
          <span class="page-form-item-label__text"><span style="color:red">*</span>猪场地址</span>
        </label>
        <div class="page-form-item-content">
          <el-input v-model="topData.address" size="small" :disabled="isDisabled" maxlength="50" placeholder="请输入猪场地址"></el-input>
        </div>
      </div>
      <div class="page-form-item">
        <label class="page-form-item-label">
          <span class="page-form-item-label__text"><span style="color:red">*</span>安全状态</span>
        </label>
        <div class="page-form-item-content">
          <el-select v-model="topData.safeType" :disabled="isDisabled" clearable placeholder="请选择" size="small">
            <el-option label="阴性" value="1"></el-option>
            <el-option label="阳性" value="2"></el-option>
          </el-select>
        </div>
      </div>
      <div class="page-form-item">
        <label class="page-form-item-label">
          <span class="page-form-item-label__text"><span style="color:red">*</span>产权归属</span>
        </label>
        <div class="page-form-item-content">
          <el-select v-model="topData.propertyType" :disabled="isDisabled" clearable placeholder="请选择" size="small">
            <el-option label="自建场" value="1"></el-option>
            <el-option label="代建场" value="2"></el-option>
            <el-option label="租赁场" value="3"></el-option>
          </el-select>
        </div>
      </div>
      <div class="page-form-item">
        <label class="page-form-item-label">
          <span class="page-form-item-label__text"></span>
        </label>
        <div class="page-form-item-content">
        </div>
      </div>
      <div class="page-form-item">
        <label class="page-form-item-label">
          <span class="page-form-item-label__text"></span>
        </label>
        <div class="page-form-item-content">
        </div>
      </div>
    </div>

    <div v-if="pageType == 'details' ">


      <div class="title" style="border:none">
        <div class="left"><span class="circle"></span>改造记录</div>
        <div class="right">
        </div>
      </div>
      <el-table :data="recordList" max-height="300">
        <el-table-column label="标题" prop="deptName" :show-overflow-tooltip="true" width="150" >
          <template slot-scope="scope">
            {{scope.row.pigfarmInfo.pigfarmName}}立项申请
          </template>
        </el-table-column>
        <el-table-column label="项目编码" prop="projectNumber" :show-overflow-tooltip="true" width="150" />
        <el-table-column label="项目名称" prop="projectName" :show-overflow-tooltip="true" width="150" align="center"/>
        <el-table-column label="计划开始" prop="beginTime" width="150" align="center"/>
        <el-table-column label="计划结束" prop="endTime" width="150" align="center"/>


        <el-table-column label="片区" prop="pigfarmInfo.deptName" align="center" width="100" />
        <el-table-column label="猪场编码" prop="pigfarmInfo.pigfarmNumber" align="center" width="100" :show-overflow-tooltip="true" />
        <el-table-column label="猪场名称" prop="pigfarmInfo.pigfarmName" align="center" width="180" :show-overflow-tooltip="true" />
        <el-table-column label="建设类型" align="center" width="100" >
          <template slot-scope="scope">
            <span v-show="scope.row.pigfarmInfo.buildType == '1'">楼房猪场</span>
            <span v-show="scope.row.pigfarmInfo.buildType == '2'">平房猪场</span>
          </template>
        </el-table-column>
        <el-table-column label="猪场类型" align="center" width="100" >
          <template slot-scope="scope">
            <span v-show="scope.row.pigfarmInfo.pigfarmType == '1'">繁殖场</span>
            <span v-show="scope.row.pigfarmInfo.pigfarmType == '2'">育肥场</span>
            <span v-show="scope.row.pigfarmInfo.pigfarmType == '3'">租赁代养场</span>
            <span v-show="scope.row.pigfarmInfo.pigfarmType == '4'">种猪场</span>
            <span v-show="scope.row.pigfarmInfo.pigfarmType == '5'">自养小区</span>
            <span v-show="scope.row.pigfarmInfo.pigfarmType == '6'">租赁繁殖场</span>
            <span v-show="scope.row.pigfarmInfo.pigfarmType == '7'">公猪站</span>
          </template>
        </el-table-column>
        <el-table-column label="规模" prop="pigfarmInfo.scale" align="center" width="100" />
        <el-table-column label="单据状态" prop="status" align="center" width="100" >
          <template slot-scope="scope">
            <span v-show="scope.row.status == '' || scope.row.status == 'save' || scope.row.status == null ">保存</span>
            <span v-show="scope.row.status == 'active'">审批中</span>
            <span v-show="scope.row.status == 'completed'">审批完成</span>
            <span v-show="scope.row.status == 'cancel'">作废、取消、删除</span>
            <span v-show="scope.row.status == 'reject'">退回、驳回</span>
          </template>
        </el-table-column>
        <el-table-column label="申请人" prop="createBy" align="center" width="100" />
        <el-table-column label="申请时间" prop="createTime" align="center" width="100" />
        <el-table-column
          align="center"
          width="120px"
          fixed="right"
          label="操作">
          <template slot-scope="scope">
            <el-checkbox border size="mini" v-model="scope.row.checked" @change="handelCheckbox($event,scope.$index,scope.row)">查看</el-checkbox>
          </template>
        </el-table-column>
      </el-table>

      <el-tabs v-model="activeName" style="margin-top:20px" v-if="showInfo">
        <el-tab-pane label="图纸设计" name="2">
          <el-table :data="designData.records">
            <el-table-column label="标题"  align="center" :show-overflow-tooltip="true" min-width="150" >
              <template slot-scope="scope">
                {{scope.row.projectName+'图纸设计'+scope.row.createTime}}
              </template>
            </el-table-column>
            <el-table-column label="项目编码" :show-overflow-tooltip="true" prop="projectNumber" align="center" min-width="120" />
            <el-table-column label="项目名称" :show-overflow-tooltip="true" prop="projectName" min-width="100" align="center"/>
            <el-table-column label="猪场名称" prop="pigfarmName" min-width="100" align="center"/>
            <el-table-column label="单据状态" prop="statusName" min-width="100" align="center"/>
            <el-table-column label="申请人" prop="createName" min-width="80" align="center"/>
            <el-table-column label="申请时间" prop="createTime" min-width="120" align="center"/>
          </el-table>
          <el-pagination
            style="text-align: right;"
            v-show="designData.total>0"
            :total="designData.total"
            :page-size="5"
            @current-change="getDesignFn"
          />
        </el-tab-pane>
        <el-tab-pane label="预算编制" name="3">
          <el-table :data="budgetData.records">
            <el-table-column label="标题"  align="center" :show-overflow-tooltip="true" min-width="150" >
              <template slot-scope="scope">
                {{scope.row.projectName+'图纸设计'+scope.row.createTime}}
              </template>
            </el-table-column>
            <el-table-column label="项目编码" :show-overflow-tooltip="true" prop="projectNumber" align="center" min-width="120" />
            <el-table-column label="项目名称" :show-overflow-tooltip="true" prop="projectName" min-width="100" align="center"/>
            <el-table-column label="猪场名称" prop="pigfarmName" min-width="100" align="center"/>
            <el-table-column label="单据状态" prop="statusName" min-width="100" align="center"/>
            <el-table-column label="申请人" prop="createName" min-width="80" align="center"/>
            <el-table-column label="申请时间" prop="createTime" min-width="120" align="center"/>
          </el-table>
          <el-pagination
            style="text-align: right;"
            v-show="budgetData.total>0"
            :total="budgetData.total"
            :page-size="5"
            @current-change="getBudgetFn"
          />
        </el-tab-pane>
        <el-tab-pane label="承建商匹配" name="4">
          <el-table :data="matchData.records">
            <el-table-column label="流程标题" align="center" :show-overflow-tooltip="true" min-width="150" >
              <template slot-scope="scope">
                {{scope.row.projectName+'承建商匹配'+scope.row.createTime}}
              </template>
            </el-table-column>
            <el-table-column label="项目名称" :show-overflow-tooltip="true" prop="projectName" min-width="120" align="center"/>
            <el-table-column label="猪场名称" prop="pigfarmName" :show-overflow-tooltip="true"  min-width="100" align="center"/>
            <el-table-column label="承建商" prop="supplierName" :show-overflow-tooltip="true" min-width="100" align="center"/>
            <el-table-column label="承建商范围" prop="scope" :show-overflow-tooltip="true" min-width="100" align="center"/>
            <el-table-column label="单据状态" prop="statusName" min-width="100" align="center"/>
            <el-table-column label="申请人" prop="createName" min-width="80" align="center"/>
            <el-table-column label="申请时间" prop="createTime" min-width="120" align="center"/>
          </el-table>
          <el-pagination
            style="text-align: right;"
            v-show="matchData.total>0"
            :total="matchData.total"
            :page-size="5"
            @current-change="getMatchFn"
          />
        </el-tab-pane>
        <el-tab-pane label="合同签订" name="5">
          <el-table :data="contractData.records">
            <el-table-column label="项目名称" align="center"  prop="projectName" :show-overflow-tooltip="true" />
            <el-table-column label="合同标题" align="center"  prop="contractTitle" :show-overflow-tooltip="true" />
            <el-table-column label="合同编码" prop="contractNumber" align="center"/>
            <el-table-column label="合同金额" prop="contractMoney" align="center"/>
            <el-table-column label="创建人" prop="createBy" align="center"/>
            <el-table-column label="创建时间" prop="createTime" align="center"/>

          </el-table>
          <el-pagination
            style="text-align: right;"
            v-show="contractData.total>0"
            :total="contractData.total"
            :page-size="5"
            @current-change="getContractFn"
          />
        </el-tab-pane>
        <el-tab-pane label="施工进度" name="6">
          <el-table :data="progressData.records">
            <el-table-column label="立项编码" prop="projectNumber" :show-overflow-tooltip="true" width="280" />
            <el-table-column label="立项名称" prop="pigfarmInfo.pigfarmName" align="center"/>
            <el-table-column label="进度%" prop="pigfarmProjectExt.progress" width="150" align="center"/>
            <el-table-column label="计划开始" prop="beginTime" align="center"/>
            <el-table-column label="计划结束" prop="endTime" align="center"/>
            <el-table-column label="实际开始" prop="pigfarmProjectExt.startDate" align="center"/>
            <el-table-column label="实际结束" prop="pigfarmProjectExt.endDate" align="center"/>
          </el-table>
          <el-pagination
            style="text-align: right;"
            v-show="progressData.total>0"
            :total="progressData.total"
            :page-size="5"
            @current-change="getProgressFn"
          />
        </el-tab-pane>
        <el-tab-pane label="竣工验收" name="7">
          <el-table :data="completeData.records">
            <el-table-column prop="projectName" label="项目名称"></el-table-column>
            <el-table-column prop="contractTitle" label="合同名称"></el-table-column>
            <el-table-column prop="createName" label="提交人" show-overflow-tooltip></el-table-column>
            <el-table-column prop="createTime" label="提交时间" show-overflow-tooltip></el-table-column>
            <el-table-column prop="status" label="单据状态" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{scope.row.status | handleStatus}}</span>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            style="text-align: right;"
            v-show="completeData.total>0"
            :total="completeData.total"
            :page-size="5"
            @current-change="getCompleteFn"
          />
        </el-tab-pane>
        <el-tab-pane label="付款信息" name="8">
          <el-table :data="applyData.records">
            <el-table-column prop="projectName" label="项目名称" show-overflow-tooltip></el-table-column>
            <el-table-column prop="pigfarmNumber" label="猪场编码" show-overflow-tooltip></el-table-column>
            <el-table-column prop="contractTitle" label="合同名称" show-overflow-tooltip></el-table-column>
            <el-table-column prop="contractMoney" label="合同金额" show-overflow-tooltip></el-table-column>
            <el-table-column prop="thisMoney" label="申请金额" show-overflow-tooltip></el-table-column>
            <el-table-column prop="actualMoney" label="实际已支付金额" show-overflow-tooltip></el-table-column>
            <el-table-column prop="status" label="审批状态" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{scope.row.status | handleStatus}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="createName" label="提交人" show-overflow-tooltip></el-table-column>
            <el-table-column prop="createTime" label="提交时间" show-overflow-tooltip></el-table-column>
          </el-table>
          <el-pagination
            style="text-align: right;"
            v-show="applyData.total>0"
            :total="applyData.total"
            :page-size="5"
            @current-change="getApplyFn"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { getTreeselect ,addFarmInfo,updateFarmInfo,getDetailsById,getRecordList,getDesignList,getBudgetList,getMatchList,getContractList,getProgressList,getCompleteList,getApplyList} from "@/api/pigFarm/pigFarmInfo";
import { makePy } from "@/utils/makePy";
import { roleOption } from "@/api/auth/role";
import { getToken } from "@/utils/auth";
import { treeselect } from "@/api/auth/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import BaseIndex from '@/views/base/BaseIndex'
import loadingSearchFormCompany from '@/views/components/loadingSearchFormCompany/index.vue'
export default {
  name: "PigFarmDetails",
  components: { Treeselect ,loadingSearchFormCompany },
  extends: BaseIndex,
  data() {
    return {
      loading:false,
      activeName:'2',
      isDisabled:false,
      deptOptions:[],
      companyOptions:[],
      props:{
        value:'id',
        label:'label'
      },
      topData:{
        pigfarmNumber:'',
        deptId:undefined
      },
      pageType:'',
      showInfo:false,
      recordList:[],//改造记录
      projectId:'', // 选中ID
      designData:{},// 图纸设计
      budgetData:{},// 预算编制
      matchData:{},// 承建商匹配
      contractData:{},// 合同签订
      progressData:{},// 施工进度
      completeData:{},// 竣工验收
      applyData:{},// 付款信息
    };
  },
  watch: {
    activeName(val, oldVal){//普通的watch监听
      console.log(val);
      if (val == '3') {
        this.getBudgetFn()
      }
      if (val == '4') {
        this.getMatchFn()
      }
      if (val == '5') {
        this.getContractFn()
      }
      if (val == '6') {
        this.getProgressFn()
      }
      if (val == '7') {
        this.getCompleteFn()
      }
      if (val == '8') {
        this.getApplyFn()
      }
    },
  },
  created() {
    this.pageType = this.$route.query.type
    if(this.$route.query.type == 'add'){}

    if(this.$route.query.type == 'details' || this.$route.query.type == 'change'){

      if(this.$route.query.type == 'details'){
        this.isDisabled = true;
        getRecordList(this.$route.query.id).then(
          response => {
            if(response && response.code ===0){
              for (let index = 0; index < response.data.length; index++) {
                response.data[index]['checked'] = false

              }

              this.recordList = response.data
            }else{
              this.msgError(response.msg)
            }
            this.loading = false;
          }
        ).catch((err) => {
          this.loading = false;
        })
      }
      if(this.$route.query.type == 'change'){
        this.isDisabled = false;
      }

      this.loading = true
      getDetailsById(this.$route.query.id).then(
        response => {
          if(response && response.code ===0){
            this.topData = {...response.data}
          }else{
            this.msgError(response.msg)
          }
          this.loading = false;
        }
      ).catch((err) => {
        this.loading = false;
      })
    }

    getTreeselect().then(
      response => {
        if(response && response.code ===0){
          this.deptOptions = response.data
        }else{
          this.msgError(response.msg)
        }
        this.loading = false;
      }
    ).catch((err) => {
      this.loading = false;
    })
  },
  methods: {

    getApplyFn(e){// 付款信息
      var data = {
        projectId:this.projectId,
        pageSize:'5',
        pageNum:e||'1'
      }
      getApplyList(data).then(
        response => {
          if(response && response.code ===0){
            this.applyData = response.data
          }else{
            this.msgError(response.msg)
          }
          this.loading = false;
        }
      ).catch((err) => {
        this.loading = false;
      })
    },

    getCompleteFn(e){// 竣工验收
      var data = {
        projectId:this.projectId,
        pageSize:'5',
        pageNum:e||'1'
      }
      getCompleteList(data).then(
        response => {
          if(response && response.code ===0){
            this.completeData = response.data
          }else{
            this.msgError(response.msg)
          }
          this.loading = false;
        }
      ).catch((err) => {
        this.loading = false;
      })
    },

    getProgressFn(e){// 施工进度
      var data = {
        projectId:this.projectId,
        pageSize:'5',
        pageNum:e||'1'
      }
      getProgressList(data).then(
        response => {
          if(response && response.code ===0){
            this.progressData = response.data
          }else{
            this.msgError(response.msg)
          }
          this.loading = false;
        }
      ).catch((err) => {
        this.loading = false;
      })
    },

    getContractFn(e){// 合同签订
      var data = {
        projectId:this.projectId,
        pageSize:'5',
        pageNum:e||'1'
      }
      getContractList(data).then(
        response => {
          if(response && response.code ===0){
            this.contractData = response.data
          }else{
            this.msgError(response.msg)
          }
          this.loading = false;
        }
      ).catch((err) => {
        this.loading = false;
      })
    },

    getMatchFn(e){// 承建商匹配
      var data = {
        projectId:this.projectId,
        pageSize:'5',
        pageNum:e||'1'
      }
      getMatchList(data).then(
        response => {
          if(response && response.code ===0){
            this.matchData = response.data
          }else{
            this.msgError(response.msg)
          }
          this.loading = false;
        }
      ).catch((err) => {
        this.loading = false;
      })
    },

    getBudgetFn(e){// 预算编制
      var data = {
        projectId:this.projectId,
        pageSize:'5',
        pageNum:e||'1'
      }
      getBudgetList(data).then(
        response => {
          if(response && response.code ===0){
            this.budgetData = response.data
          }else{
            this.msgError(response.msg)
          }
          this.loading = false;
        }
      ).catch((err) => {
        this.loading = false;
      })
    },
    getDesignFn(e){// 图纸设计
      var data = {
        projectId:this.projectId,
        pageSize:'5',
        pageNum:e||'1'
      }
      getDesignList(data).then(
        response => {
          if(response && response.code ===0){
            this.designData = response.data
          }else{
            this.msgError(response.msg)
          }
          this.loading = false;
        }
      ).catch((err) => {
        this.loading = false;
      })
    },

    handelCheckbox(e,ind,row){
      if (!e) {
        this.showInfo = false
        return false
      }

      this.showInfo = true
      this.activeName = '2'
      this.projectId = row.id;
      this.getDesignFn()

      for (let index = 0; index < this.recordList.length; index++) {
        if (index != ind) {
          this.recordList[index]['checked'] = false
        }
      }
    },
    changeCom(e){
      this.topData.companyName = e.name
      this.topData.companyId = e.id
    },
    changeCom1(e){
      this.topData.companyId = e
    },
    makePy,
    handelpigfarmName(e){
      let arr = this.makePy(e)
      this.topData.pigfarmNumber = arr[0]
    },
    handelSaveFn(e){
      if(!this.topData.deptId) {this.msgError('请填写 片区'); return false;}
      if(!this.topData.pigfarmName) {this.msgError('请填写 猪场名称'); return false;}
      if(!this.topData.pigfarmNumber) {this.msgError('请填写 猪场编码'); return false;}
      if(!this.topData.buildType) {this.msgError('请填写 建设类型'); return false;}
      if(!this.topData.pigfarmType) {this.msgError('请填写 猪场类型'); return false;}
      if(!this.topData.scale) {this.msgError('请填写 规模'); return false;}
      if(!this.topData.companyName) {this.msgError('请填写 所在公司'); return false;}
      if(!this.topData.address) {this.msgError('请填写 猪场地址'); return false;}

      if(!this.topData.safeType) {this.msgError('请填写 安全状态'); return false;}
      if(!this.topData.propertyType) {this.msgError('请填写 产权归属'); return false;}


      var para = {
        status : e,
        ...this.topData
      }
      this.loading = true
      if(this.$route.query.type == 'change'){
        updateFarmInfo(para).then(
          response => {
            if(response && response.code ===0){
              // this.zoneList = response.data
              this.msgSuccess("成功");
              this.$router.go(-1)
            }else{
              this.msgError(response.msg)
            }
            this.loading = false;
          }
        ).catch((err) => {
          this.loading = false;
        })
      }else{
        addFarmInfo(para).then(
          response => {
            if(response && response.code ===0){
              // this.zoneList = response.data
              this.msgSuccess("成功");
              this.$router.go(-1)
            }else{
              this.msgError(response.msg)
            }
            this.loading = false;
          }
        ).catch((err) => {
          this.loading = false;
        })
      }

    },
    handleSubCat(e){
      console.log(e[1])
      this.topData.deptId = e[1]
    },
  }
};
</script>
<style scoped  lang="scss">
.title {
  display: flex;
  justify-content: space-between;
  padding: 0 0.9375rem 0.9375rem 0.9375rem;
  // padding: 0 0.9375rem 0 0.9375rem;
  background-color: white;
  // border-bottom: 2px solid #ccc ;
  .circle {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    background-color: #4A75D0;
    margin-right: 10px;
  }
}

.context-warp {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
  margin: 15px;
  border-bottom: 1px solid #ebeef3;
  border-right: 1px solid #ebeef3;
  background-color: white;

  .page-form-item {
    width: 33.3%;
    font-size: 14px;
    font-family: "PingFangSC";
    position: relative;
    border-top: 1px solid #ebeef3;
    vertical-align: top;
    height: 66px;
    color: #4d4d4d;
    display: flex;

    .page-form-item-label {
      width: 120px;
      height: 100%;

      .icon {
        color: red;
      }
    }

    .left-border {
      position: absolute;
      height: 100%;
      width: 1px;
      left: 0;
      top: 0;
      background-color: #ebeef3;
      z-index: 999;
    }

    &-label {
      display: inline-block;
      height: calc(100% - 16px);
      background-color: #f9fafd;
      border-right: 1px solid #ebeef3;
      border-left: 1px solid #ebeef3;
      text-align: center;

      .require {
        display: inline-block;
        width: 8px;
        color: #f56c6c;
        vertical-align: -3px;
      }

      &__text {
        display: inline-block;
        vertical-align: middle;
        line-height: 1.3em;
        width: 80%;
      }

      &::after {
        content: "";
        display: inline-block;
        vertical-align: middle;
        height: 100%;
      }
    }

    .border-right0 {
      border-right: 0;
    }

    &-content {
      display: inline-block;
      vertical-align: top;
      padding: 8px;
      height: calc(100% - 16px);

      &.noLabel {
        border-left: 1px solid #ebeef3;
      }

      &::after {
        content: "";
        display: inline-block;
        vertical-align: middle;
        height: 100%;
      }

      &.align-top {
        &::after {
          content: "";
          vertical-align: top;
        }
      }

      &.noPadding {
        padding: 0;
      }
    }

    .el-table th {
      background-color: #f9fafd;
    }

    .el-radio {
      margin-right: 15px;
    }

    .el-radio__label {
      font-size: 12px;
    }

    .el-input--small .el-input__inner {
      font-size: 12px;
    }

    .el-checkbox {
      font-size: 12px;
    }

    .el-checkbox__label {
      font-size: 12px;
      vertical-align: -2px;
    }

    .el-select {
      width: 100%;
    }

    .el-cascader {
      width: 100%;
    }

    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 100%;
    }

    .el-textarea__inner {
      height: 80px;
    }
    .page-form-item-content {
      height: 100%;
      flex: 1;
      display: flex;
      align-items: center;
      .text-box {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        cursor: pointer;
      }

      .slider-box {
        display: flex;
        justify-content: space-between;

        &:first-child {
          flex: 1;
        }
      }
    }
  }

  .page-form-item2{
    width: 50%;
  }
  .page-form-item3{
    width: 100%;
  }
}
</style>
